<template>
	<template v-if="name === 'wds-blocks'">
		<svg
			:height="size"
			:width="size"
			viewBox="1 2 15 15"
			xmlns="http://www.w3.org/2000/svg"
			fill="none"
			stroke="currentColor"
		>
			<line x1="13.5" y1="2" x2="13.5" y2="7" />
			<line x1="16" y1="4.5" x2="11" y2="4.5" />
			<path
				d="M7.5 15.75V6C7.5 5.80109 7.42098 5.61032 7.28033 5.46967C7.13968 5.32902 6.94891 5.25 6.75 5.25H3C2.80109 5.25 2.61032 5.32902 2.46967 5.46967C2.32902 5.61032 2.25 5.80109 2.25 6V15C2.25 15.1989 2.32902 15.3897 2.46967 15.5303C2.61032 15.671 2.80109 15.75 3 15.75H12C12.1989 15.75 12.3897 15.671 12.5303 15.5303C12.671 15.3897 12.75 15.1989 12.75 15V11.25C12.75 11.0511 12.671 10.8603 12.5303 10.7197C12.3897 10.579 12.1989 10.5 12 10.5H2.25"
			/>
		</svg>
	</template>
	<template v-else-if="name === 'wds-blueprints'">
		<svg
			:width="size"
			:height="size"
			viewBox="2 2 15 15"
			xmlns="http://www.w3.org/2000/svg"
			fill="currentColor"
		>
			<path
				d="M14 2.5C15.3807 2.5 16.5 3.61929 16.5 5C16.5 6.38071 15.3807 7.5 14 7.5C12.7905 7.5 11.7814 6.64114 11.5498 5.5H7.4502C7.25138 6.47953 6.47951 7.25033 5.5 7.44922V11.5498C6.64114 11.7814 7.5 12.7905 7.5 14C7.5 15.3807 6.38071 16.5 5 16.5C3.61929 16.5 2.5 15.3807 2.5 14C2.5 12.7905 3.35886 11.7814 4.5 11.5498V7.44922C3.35895 7.21753 2.5 6.20943 2.5 5C2.5 3.61929 3.61929 2.5 5 2.5C6.20949 2.5 7.21858 3.35886 7.4502 4.5H11.5498C11.7814 3.35886 12.7905 2.5 14 2.5ZM14 11.5C15.3807 11.5 16.5 12.6193 16.5 14C16.5 15.3807 15.3807 16.5 14 16.5C12.6193 16.5 11.5 15.3807 11.5 14C11.5 12.6193 12.6193 11.5 14 11.5ZM5 12.5C4.17157 12.5 3.5 13.1716 3.5 14C3.5 14.8284 4.17157 15.5 5 15.5C5.82843 15.5 6.5 14.8284 6.5 14C6.5 13.1716 5.82843 12.5 5 12.5ZM14 12.5C13.1716 12.5 12.5 13.1716 12.5 14C12.5 14.8284 13.1716 15.5 14 15.5C14.8284 15.5 15.5 14.8284 15.5 14C15.5 13.1716 14.8284 12.5 14 12.5ZM5 3.5C4.17157 3.5 3.5 4.17157 3.5 5C3.5 5.82843 4.17157 6.5 5 6.5C5.82843 6.5 6.5 5.82843 6.5 5C6.5 4.17157 5.82843 3.5 5 3.5ZM14 3.5C13.1716 3.5 12.5 4.17157 12.5 5C12.5 5.82843 13.1716 6.5 14 6.5C14.8284 6.5 15.5 5.82843 15.5 5C15.5 4.17157 14.8284 3.5 14 3.5Z"
			/>
		</svg>
	</template>
	<template v-else-if="name === 'wds-function'">
		<svg
			:width="size"
			:height="size"
			viewBox="1 1 10 10"
			xmlns="http://www.w3.org/2000/svg"
			fill="currentColor"
		>
			<path
				d="M5.62515 8.875V8.125H6.3329L7.75115 6.5L6.3329 4.875H5.44052L4.64052 9.074C4.56111 9.50033 4.41098 9.82375 4.19015 10.0442C3.96932 10.2647 3.68419 10.375 3.33477 10.375C3.00144 10.375 2.72936 10.2846 2.51852 10.1039C2.30761 9.92304 2.20215 9.68363 2.20215 9.38562C2.20215 9.16062 2.26094 8.97967 2.37852 8.84275C2.49619 8.70592 2.64573 8.6375 2.82715 8.6375C3.00023 8.6375 3.14765 8.69713 3.2694 8.81638C3.39123 8.93563 3.45215 9.07921 3.45215 9.24713C3.45215 9.31446 3.43723 9.37358 3.4074 9.4245C3.37757 9.4755 3.34086 9.51542 3.29727 9.54425C3.31327 9.56025 3.33573 9.57387 3.36465 9.58512C3.39348 9.59629 3.42552 9.60188 3.46077 9.60188C3.56977 9.59679 3.6589 9.54667 3.72815 9.4515C3.79732 9.35625 3.85307 9.20958 3.8954 9.0115L4.67527 4.875H3.2214V4.125H4.81465L5.06752 2.75775C5.13227 2.40583 5.27732 2.12904 5.50265 1.92738C5.72798 1.72579 6.0044 1.625 6.3319 1.625C6.66015 1.625 6.92969 1.72133 7.14052 1.914C7.35144 2.10658 7.4569 2.34933 7.4569 2.64225C7.4569 2.857 7.39811 3.03283 7.28052 3.16975C7.16286 3.30658 7.01332 3.375 6.8319 3.375C6.65882 3.375 6.5114 3.31617 6.38965 3.1985C6.26782 3.08092 6.2069 2.93558 6.2069 2.7625C6.2069 2.69517 6.22182 2.63604 6.25165 2.58512C6.28148 2.53412 6.31977 2.49421 6.36652 2.46537C6.35052 2.44612 6.32569 2.43008 6.29202 2.41725C6.25836 2.4045 6.2239 2.39812 6.18865 2.39812C6.08415 2.40837 6.00098 2.45421 5.93915 2.53562C5.87732 2.61704 5.83002 2.73754 5.79727 2.89713L5.58477 4.125H7.87515V4.875H7.32615L8.25015 5.92988L9.17427 4.875H8.62515V4.125H10.8751V4.875H10.1675L8.74927 6.5L10.1723 8.125H10.8751V8.875H8.62515V8.125H9.17427L8.25015 7.0625L7.32615 8.125H7.87515V8.875H5.62515Z"
			/>
		</svg>
	</template>
	<template v-else-if="name === 'wds-send'">
		<svg
			:width="size"
			:height="size"
			viewBox="0 0 14 12"
			xmlns="http://www.w3.org/2000/svg"
			fill="currentColor"
		>
			<path
				d="M14.0712 4.50295C14.2882 4.72002 14.2882 5.07197 14.0712 5.28905L10.5337 8.8265C10.3166 9.04357 9.96468 9.04357 9.7476 8.8265C9.53052 8.60942 9.53052 8.25747 9.7476 8.0404L12.892 4.896L9.7476 1.7516C9.53052 1.53452 9.53052 1.18257 9.7476 0.965495C9.96467 0.74842 10.3166 0.74842 10.5337 0.965495L14.0712 4.50295ZM13.6781 5.45185L3.67268 5.45185L3.67268 4.34014L13.6781 4.34014L13.6781 5.45185ZM2.00511 7.11942L2.00511 8.23114L0.893394 8.23114L0.893394 7.11942L2.00511 7.11942ZM3.67268 9.89871L5.52553 9.89871L5.52553 11.0104L3.67268 11.0104L3.67268 9.89871ZM2.00511 8.23114C2.00511 9.15211 2.7517 9.89871 3.67268 9.89871L3.67268 11.0104C2.13772 11.0104 0.893394 9.76609 0.893394 8.23114L2.00511 8.23114ZM3.67268 5.45185C2.7517 5.45185 2.00511 6.19845 2.00511 7.11942L0.893394 7.11942C0.893394 5.58447 2.13772 4.34014 3.67268 4.34014L3.67268 5.45185Z"
			/>
		</svg>
	</template>
	<template v-else-if="name === 'wds-at-sign-slash'">
		<svg
			:width="size"
			:height="size"
			viewBox="0 0 12 12"
			xmlns="http://www.w3.org/2000/svg"
			fill="currentColor"
		>
			<path
				d="M10.5616 2.24813C10.708 2.10174 10.9454 2.10177 11.0919 2.24813C11.2379 2.39461 11.2381 2.6321 11.0919 2.77841L10.4229 3.44638C11.0404 4.34151 11.375 5.40523 11.3751 6.49813V6.99813C11.375 7.49528 11.1778 7.97275 10.8262 8.32431C10.4747 8.67585 9.99722 8.87303 9.50008 8.87313C9.00296 8.87305 8.52545 8.67579 8.1739 8.32431C8.05906 8.20944 7.96236 8.07944 7.88191 7.94149C7.44779 8.50645 6.76761 8.87306 6.00008 8.87313C5.70185 8.87311 5.41736 8.81529 5.15437 8.71493L3.48836 10.3809C4.1994 10.8408 5.02632 11.099 5.87996 11.1212C6.92135 11.1482 7.94108 10.8224 8.77449 10.1974C8.94014 10.0732 9.17563 10.108 9.29988 10.2735C9.42391 10.4392 9.39028 10.6737 9.22469 10.7979L9.04012 10.9298C8.10738 11.5697 6.99503 11.9006 5.86043 11.8712C4.81461 11.844 3.80372 11.5111 2.94832 10.921L2.07625 11.794C1.92994 11.9403 1.69246 11.9401 1.54597 11.794C1.3996 11.6476 1.39955 11.4102 1.54597 11.2638L2.35847 10.4503L9.95222 2.85653L10.5616 2.24813ZM3.72176 1.62997C4.81841 1.11684 6.05705 0.988532 7.23543 1.26669C8.0363 1.45583 8.77676 1.82644 9.40535 2.34188L8.87117 2.87606C8.34295 2.45697 7.7272 2.15412 7.06258 1.99716C6.0487 1.75791 4.98268 1.86717 4.03914 2.30868C3.0957 2.75025 2.32924 3.4981 1.86336 4.42978C1.39751 5.36152 1.2599 6.42372 1.47273 7.44345C1.62065 8.1516 1.9319 8.81087 2.37605 9.37118L1.84383 9.90341C1.29843 9.23815 0.916239 8.44848 0.738357 7.59677C0.490995 6.41173 0.65116 5.17763 1.19246 4.09481C1.7339 3.01195 2.62522 2.14316 3.72176 1.62997ZM5.7657 8.1036C5.84232 8.11469 5.92039 8.12313 6.00008 8.12313C6.84122 8.12301 7.53292 7.48333 7.61629 6.66415L7.62508 6.49813L7.61629 6.33212C7.61395 6.30911 7.60883 6.28647 7.60555 6.26376L5.7657 8.1036ZM8.37508 5.4952V6.99813C8.37516 7.29617 8.49356 7.5822 8.70418 7.79306C8.91508 8.00396 9.20182 8.12305 9.50008 8.12313C9.7983 8.12303 10.0841 8.00394 10.295 7.79306C10.5059 7.58216 10.625 7.29637 10.6251 6.99813V6.49813C10.625 5.60398 10.3641 4.73302 9.88191 3.98739L8.37508 5.4952ZM6.00008 4.12313C6.4633 4.12318 6.8947 4.25756 7.25984 4.48739L6.71004 5.0372C6.49561 4.93249 6.25486 4.87317 6.00008 4.87313C5.10278 4.87322 4.37522 5.60085 4.37508 6.49813C4.37511 6.75285 4.43527 6.99299 4.54012 7.20712L3.98836 7.75888C3.75876 7.39349 3.62512 6.96154 3.62508 6.49813C3.62522 5.18664 4.68856 4.12322 6.00008 4.12313Z"
			/>
		</svg>
	</template>
</template>

<script lang="ts">
const iconNames = new Set([
	"wds-blocks",
	"wds-function",
	"wds-blueprints",
	"wds-send",
	"wds-at-sign-slash",
] as const);

type CustomIconName = typeof iconNames extends Set<infer T> ? T : never;

export function isCustomIconName(name: string): name is CustomIconName {
	return iconNames.has(name as CustomIconName);
}
</script>

<script setup lang="ts">
import { PropType } from "vue";

defineProps({
	name: { type: String as PropType<CustomIconName>, required: true },
});

const size = "1em";
</script>
